<template>
  <div>
    <div class="stu-list">
      <dl v-for="(item, grade, index) in classData" :key="index">
        <dt><b>{{grade}}</b></dt>
        <dd v-for="(stu, name, index) in item.student" :key="index" :data-key="index">
          <span @click="goAddress({name: 'report', params: {grade: grade, name: name}})">{{(index + 1) + '、' + stu.name}}</span>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'home',
    data () {
      return {
        classData: this.$config.classData
      }
    },
    methods: {
      goAddress: function (path) {
        this.$router.push(path)
      }
    }
  }
</script>

<style scoped lang="scss">
  .stu-list {
    padding: 100px;
    font-size: 16px;
    dl,
    dt {
      margin: 0 0 12px;
    }
    dd {
      padding: 0 0 0 32px;
      span {
        cursor: pointer;
      }
    }
  }
</style>
